<template>
  <div class="app-container home" style="background: #f0f2f5">
    <div class="contentBox">
      <el-row :gutter="20">
        <el-col :sm="24" :md="2">
          <img :src="baseUrl + avatar" class="logoUser" />
        </el-col>
        <el-col :sm="24" :md="15">
          <h1 class="name">
            {{ timeOfDay }}好, {{ $store.state.user.nickName }}, 开始您一天的工作吧！
          </h1>
        </el-col>
        <el-col
          style="text-align: right; line-height: 30px; cursor: pointer"
          :sm="24"
          :md="6"
          @click.native="getWork"
        >
          <div style="color: #000">待办</div>
          <div style="font-size: 24px; color: #000">{{ countFlow }}</div>
        </el-col>
        <!-- <el-col :sm="24" :md="2"> 头像 </el-col> -->
      </el-row>
    </div>
    <el-row :gutter="20">
      <el-col :sm="24" :md="17">
        <el-row :gutter="20">
          <el-col :sm="24" :md="12">
            <leftOne></leftOne>
          </el-col>
          <el-col :sm="24" :md="12">
            <leftOneRight></leftOneRight>
          </el-col>
        </el-row>
        <el-card style="margin-top: 20px" v-if="chacekAll()">
          <el-tabs v-model="activeProcess" @tab-click="handleClick">
            <template v-for="(item, index) in processList">
              <el-tab-pane
                :label="item.categoryVo.categoryName"
                :name="index.toString()"
              >
              </el-tab-pane
            ></template>
          </el-tabs>
          <el-tag
            v-if="$auth.hasPermi(permissionsList[e.processName])"
            v-for="e in currentList"
            @click="handleStart(e)"
            >{{ e.processName }}</el-tag
          >
        </el-card>
        <el-card
          :style="{
            'margin-top': '20px',
            height: chacekAll() ? '336px' : '485px',
          }"
        >
          <div slot="header" class="clearfix">
            <span class="title">合同进度</span>
          </div>
          <el-table :data="dataListContract">
            <el-table-column
              label="项目名称"
              prop="name"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <el-link type="primary" @click="handleDetail(scope.row)">{{
                  scope.row.projectName
                }}</el-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="startTime"
              show-overflow-tooltip
              label="开始日期"
              align="center"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="endTime"
              show-overflow-tooltip
              label="结束日期"
              align="center"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="leaderName"
              show-overflow-tooltip
              label="项目负责人"
              align="center"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="totalMoney"
              show-overflow-tooltip
              label="合同总金额"
              align="center"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="payMoney"
              show-overflow-tooltip
              label="项目总支出"
              align="center"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="leaveMoney"
              show-overflow-tooltip
              label="剩余款项"
              align="center"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="projectRate"
              show-overflow-tooltip
              label="项目进度"
              align="center"
              min-width="100"
            >
              <template slot-scope="scope">
                {{ scope.row.projectRate ? scope.row.projectRate : 0 }}%
              </template>
            </el-table-column>
            <!-- <el-table-column
              prop="payRate"
              show-overflow-tooltip
              label="到款比例"
              align="center"
              min-width="100"
            >
              <template slot-scope="scope">
                {{ scope.row.payRate ? scope.row.payRate : 0 }}
              </template>
            </el-table-column> -->
          </el-table>
        </el-card>

        <!-- <el-card style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span class="title">趋势图</span>
          </div>
          <leftChart></leftChart>
        </el-card> -->
      </el-col>
      <el-col :sm="24" :md="7">
        <leftSecond></leftSecond>

        <!-- <rightCalendar></rightCalendar> -->
        <rightContent :chartData="chartData"></rightContent>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import leftOne from "./components/index/left_one.vue";
import leftOneRight from "./components/index/left_one_right.vue";

import leftSecond from "./components/index/left_second.vue";
import leftChart from "./components/index/left_chart.vue";
import rightContent from "./components/index/right_second.vue";
import rightCalendar from "./components/index/right_calendar.vue";
import { listProcess } from "@/api/workflow/process";
// import { projectContractList } from "@/api/business/projectContract.js";
import {
  projectList,
 
} from "@/api/business/project.js";
import { moneyReport } from "@/api/business/projectContract";
import moment from 'moment'
import { todoCount } from "@/api/workflow/process.js";
export default {
  name: "Index",
  components: {
    leftOne,
    leftSecond,
    leftChart,
    rightContent,
    rightCalendar,
    leftOneRight,
  },
  data() {
    return {
      baseUrl: this.$VUE_APP_IMG_API,
      processList: [],
      currentList: [],
      dataListContract: [],
      activeProcess: "0",
      chartData: {},
      permissionsList: {
        费用报销: "workflow:fybx:fybx",
        购置设备: "workflow:sbsp:gzsb",
        验收设备: "workflow:sbsp:yssb",
        "设备（工具）符合性确认": "workflow:sbsp:sbfhxqr",
        仪器设备计量检定要求: "workflow:sbsp:yqsbjljdyq",
        设备校准结果符合性确认: "workflow:sbsp:jzjgfhxqrb",
        设备授权操作人员: "workflow:sbsp:sbsqczry",
        "设备停用/报废/恢复使用": "workflow:sbsp:status",
        转正申请: "workflow:user:zqsq",
        离职申请: "workflow:user:lzsq",
        管理体系内部审核计划: "workflow:quality:gltxplan",
        不符合报告及纠正措施: "workflow:quality:bfhbg",
        "质量监控计划(外部)": "workflow:quality:outplan",
        "质量监控计划(内部)": "workflow:quality:inplan",
        购置消耗品: "workflow:quality:goods",
        管理评审工作计划: "workflow:quality:glpsplan",
        改进计划: "workflow:quality:gjjh",
        仪器设备信息修改审批: "workflow:sbsp:edit:info",
        仪器设备调整校准周期: "workflow:sbsp:edit:dataApprove",
        供应商服务评价: "workflow:supplier:sever:rate",
      },

      tableList: [
        {
          name: "苏州项目",
          jj: "简介",
          jdqk: "进度",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device", "countFlow"]),
    timeOfDay() {
      const currentTime = moment();
      if (currentTime.hour() < 12) {
        return '早上';
      } else {
        return '下午';
      }
    }
  },
  mounted() {
    this.getList();
    this.getListContract();
    this.moneyReport();
    console.log(this.$store);
  },
  methods: {
    chacek(e) {
      let list = e.list.map((e) => this.permissionsList[e.processName]);
      return this.$auth.hasPermiOr(list);
    },
    chacekAll() {
      let list = [];
      this.processList.forEach((e) => {
        e.list.forEach((_e) => {
          list.push(this.permissionsList[_e.processName]);
        });
      });
      return this.$auth.hasPermiOr(list);
    },
    handleClick(e) {
      this.currentList = this.processList[this.activeProcess].list;
    },
    handleStart(row) {
      this.$router.push({
        path: "/workflow/process/start/" + row.deploymentId,
        query: {
          definitionId: row.definitionId,
          value:1
        },
      });
    },
    getListContract() {
      projectList({ pageNum: 1, pageSize: 5 }).then((response) => {
        this.dataListContract = response.rows;
      });
    },
    moneyReport() {
      moneyReport().then((res) => {
        console.log(res.data);
        this.chartData = res.data;
      });
    },
    /** 查询流程定义列表 */
    getList() {
      listProcess(this.queryParams).then((response) => {
        // if()
        // response.data.splice(2,1)
        this.processList = response.data.filter((item) => this.chacek(item));
        this.currentList = this.processList[this.activeProcess].list;
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    getWork() {
      this.$router.push("/work/todo");
    },
    handleDetail(row) {
      this.$router.push(
        "/2/addProject?isInfo=true&id=" + row.projectId
      );
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.contentBox {
  margin-bottom: 20px;
  background: white;
  padding: 16px 24px;
  .logoUser {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
  .name {
    line-height: 35px;
    color: #000;
  }
}
</style>
<style scoped>
.el-tag {
  cursor: pointer;
  margin-top: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>
